﻿ <!doctype html>
 <html lang="zh">

 	<head>
 		<meta charset="UTF-8">
 		<title>智慧校园宿管数据总览</title>
 		<meta name="viewport"
 			content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
 		<link rel="stylesheet" type="text/css" href="css/reset.css">
 		<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
 		<link rel="stylesheet" type="text/css" href="css/style.css">
 		<script src="js/screen.js"></script>
 		<script src="js/jquery.js"></script>
 		<script src="js/swiper.min.js"></script>
 		<script src="js/vue3.min.js"></script>

 		<script type="text/javascript" src="JS/MyJs.js"></script>

 		<script src="JS/jquery-3.6.4.min.js" charset="utf-8"></script>
 		<!-- LAYUI 组件引用 -->
 		<script src="JS/layer/layer.js" charset="utf-8"></script>
 		<script>
 			function open_edit_dialog_layui(url) {
 				layer.open({
 					type: 2,
 					area: ['100%', '92%'], //宽高
 					resize: true,
 					offset: 68,
 					content: [url, 'yes'],
 					success: function(layero, index) {
 						$(".layui-layer-title")[0].innerText = '详细信息';
 					}
 				});
 			}
 		</script>
 		<!-- END LAYUI 组件引用 -->

 	</head>

 	<body>
 		<div id="app">
 			<div class="header">
 				<div class="dateCont"></div>
 				<div class="week"></div>
 				<div class="schoolName">
 					智慧校园宿管数据总览
 				</div>
 				<div class="weather">
 					<%--江苏／晴转多云--%>
 				</div>
 			</div>
 			<div class="dataList">
 				<ul>
 					<li onclick="open_edit_dialog_layui('../../Manager/Module/TyjsDormMis/StuDormList/StuDormLieveList/Query/LieveList.aspx')"
 						style="cursor:pointer;">
 						<p>{{detail.PersonCount_1}}</p>
 						<span>入住人数</span>
 						<img src="images/icon1.png">
 					</li>
 					<li onclick="open_edit_dialog_layui('../../Manager/Module/BIO/Dorm/BioLog_List_WeiGui.aspx')"
 						style="cursor:pointer;">
 						<p>{{detail.PersonCount_2}}</p>
 						<span>应在寝人数</span>
 						<img src="images/icon2.png">
 					</li>
 					<li onclick="open_edit_dialog_layui('../../Manager/Module/BIO/Dorm/BioLog_List_WeiGui.aspx?DormState=在寝')"
 						style="cursor:pointer;">
 						<p>{{detail.PersonCount_3}}</p>
 						<span>当前在寝</span>
 						<img src="images/icon3.png">
 					</li>
 					<li onclick="open_edit_dialog_layui('../../Manager/Module/BIO/Dorm/BioLog_List_BiQinWaiChu.aspx')"
 						style="cursor:pointer;">
 						<p>{{detail.PersonCount_4}}</p>
 						<span>闭寝后外出未归</span>
 						<img src="images/icon4.png">
 					</li>
 					<li onclick="open_edit_dialog_layui('../../Manager/Module/BIO/Dorm/Report_DuoTianWuJiLu.aspx')"
 						style="cursor:pointer;">
 						<p>{{detail.PersonCount_5}}</p>
 						<span>无通行记录</span>
 						<img src="images/icon5.png">
 					</li>
 					<li onclick="open_edit_dialog_layui('../../Manager/Module/BIO/Dorm/Report_ZhengWanWeiGui.aspx')"
 						style="cursor:pointer;">
 						<p>{{detail.PersonCount_6}}</p>
 						<span>整晚未归</span>
 						<img src="images/icon6.png">
 					</li>
 					<li onclick="open_edit_dialog_layui('../../Manager/Module/BIO/Dorm/BioLog_List_WanGui.aspx')"
 						style="cursor:pointer;">
 						<p>{{detail.PersonCount_7}}</p>
 						<span>闭寝后晚归</span>
 						<img src="images/icon7.png">
 					</li>
 					<li onclick="open_edit_dialog_layui('../../Manager/Module/BIO/Dorm/Report_WeiChu.aspx')"
 						style="cursor:pointer;">
 						<p>{{detail.PersonCount_8}}</p>
 						<span>24h以上未出</span>
 						<img src="images/icon8.png">
 					</li>
 					<li onclick="open_edit_dialog_layui('../../Manager/Module/BIO/Dorm/Stu_KaoQinState_List.aspx?from=report&kaoqin_state=请假')"
 						style="cursor:pointer;">
 						<p>{{detail.PersonCount_9}}</p>
 						<span>请假人数</span>
 						<img src="images/icon9.png">
 					</li>
 					<li onclick="open_edit_dialog_layui('../../Manager/Module/BIO/Dorm/Stu_KaoQinState_List.aspx?from=report&kaoqin_state=实习')"
 						style="cursor:pointer;">
 						<p>{{detail.PersonCount_10}}</p>
 						<span>实习人数</span>
 						<img src="images/icon10.png">
 					</li>
 					<li onclick="open_edit_dialog_layui('../../Manager/Module/BIO/Dorm/Stu_KaoQinState_List.aspx?from=report&kaoqin_state=毕业')"
 						style="cursor:pointer;">
 						<p>{{detail.PersonCount_11}}</p>
 						<span>毕业人数</span>
 						<img src="images/icon11.png">
 					</li>
 					<li onclick="open_edit_dialog_layui('../../Manager/Module/BIO/Dorm/Stu_KaoQinState_List.aspx?from=report&kaoqin_state=停用')"
 						style="cursor:pointer;">
 						<p>{{detail.PersonCount_12}}</p>
 						<span>停用人数</span>
 						<img src="images/icon12.png">
 					</li>
 				</ul>
 			</div>
 			<div class="tableList">
 				<div class="tableBar">
 					<table border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<th width="100px">学院名称</th>
 							<th>入住人数</th>
 							<th>应在寝人数</th>
 							<th width="70px">当前在寝人数</th>
 							<th width="70px">闭寝后外出未归</th>
 							<th>无通行记录</th>
 							<th>整晚未归</th>
 							<th>闭寝后晚归</th>
 							<th>24h未出</th>
 							<th>请假人数</th>
 							<th>实习人数</th>
 							<th>毕业人数</th>
 							<th>停用人数</th>
 						</tr>

 					</table>
 					<div id="scroll-main">
 						<table id="scroll-main" :style="`margin-top: -${lIndex*trheight}px`">
 							<tr v-for="v in detail.Report_1">
 								<td width="100px">{{v.Title}}</td>
 								<td>{{v.PersonCount_1}}</td>
 								<td>{{v.PersonCount_2}}</td>
 								<td width="70px">{{v.PersonCount_3}}</td>
 								<td width="70px">{{v.PersonCount_4}}</td>
 								<td>{{v.PersonCount_5}}</td>
 								<td>{{v.PersonCount_6}}</td>
 								<td>{{v.PersonCount_7}}</td>
 								<td>{{v.PersonCount_8}}</td>
 								<td>{{v.PersonCount_9}}</td>
 								<td>{{v.PersonCount_10}}</td>
 								<td>{{v.PersonCount_11}}</td>
 								<td>{{v.PersonCount_12}}</td>
 							</tr>
 						</table>
 					</div>
 				</div>
 				<div class="tableBar">
 					<table border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<th width="100px">宿舍楼名称 </th>
 							<th>入住人数</th>
 							<th>应在寝人数</th>
 							<th width="70px">当前在寝人数</th>
 							<th width="70px">闭寝后外出未归</th>
 							<th>无通行记录</th>
 							<th>整晚未归</th>
 							<th>闭寝后晚归</th>
 							<th>24h未出</th>
 							<th>请假人数</th>
 							<th>实习人数</th>
 							<th>毕业人数</th>
 							<th>停用人数</th>
 						</tr>
 					</table>
 					<div id="scroll-main">
 						<table id="scroll-main" :style="`margin-top: -${rIndex*trheight}px`">
 							<tr v-for="v in detail.Report_2">
 								<td width="100px">{{v.Title}}</td>
 								<td>{{v.PersonCount_1}}</td>
 								<td>{{v.PersonCount_2}}</td>
 								<td width="70px">{{v.PersonCount_3}}</td>
 								<td width="70px">{{v.PersonCount_4}}</td>
 								<td>{{v.PersonCount_5}}</td>
 								<td>{{v.PersonCount_6}}</td>
 								<td>{{v.PersonCount_7}}</td>
 								<td>{{v.PersonCount_8}}</td>
 								<td>{{v.PersonCount_9}}</td>
 								<td>{{v.PersonCount_10}}</td>
 								<td>{{v.PersonCount_11}}</td>
 								<td>{{v.PersonCount_12}}</td>
 							</tr>
 						</table>
 					</div>
 				</div>
 			</div>
 			<div class="map">
 				<div class="map1"><img src="images/lbx.png"></div>
 				<div class="map2"><img src="images/jt.png"></div>
 				<div class="map3"><img src="images/map.png"></div>
 			</div>
 		</div>
 	</body>
 	<script>
 		const App = {
 			data() {
 				return {
 					detail: {},
 					lIndex: 0,
 					rIndex: 0,
 					trheight: 0
 				};
 			},
 			created() {
 				this.getData()
 			},
 			methods: {
 				getData() {
 					let that = this
 					$.getJSON('http://devsg.tsipark.com/_Face_API/Dorm/VIS_SchoolDataView.aspx?cmd=1', (res) => {
 						that.detail = res.Data
 						that.$nextTick(() => {
 							if (this.trheight == 0) {
 								this.trheight = $('tr').height() + 2
 								that.goScroll()
 							}

 						})
 						setTimeout(() => {
 							that.getData()
 						}, 10000);
 					})
 				},
 				goScroll() {
 					let that = this
 					if (that.detail.Report_2.length - 9 > this.rIndex) {
 						this.rIndex++
 					} else {
 						this.rIndex = 0
 					}
 					if (that.detail.Report_1.length - 9 > this.lIndex) {
 						this.lIndex++
 					} else {
 						this.lIndex = 0
 					}

 					setTimeout(() => {
 						that.goScroll()
 					}, 1000);
 				}
 			}
 		};
 		const app = Vue.createApp(App);
 		app.mount("#app");
 	</script>
 	<script type="text/javascript">
 		//页面加载调用
 		window.onload = function() {
 			//每1秒刷新时间
 			setInterval("NowTime()", 1000);
 		}

 		function NowTime() {
 			var myDate = new Date();
 			var y = myDate.getFullYear();
 			var M = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
 			var d = myDate.getDate(); //获取当前日(1-31)
 			var h = myDate.getHours(); //获取当前小时数(0-23)
 			var m = myDate.getMinutes(); //获取当前分钟数(0-59)
 			var s = myDate.getSeconds(); //获取当前秒数(0-59)
 			var w = myDate.getDay();
 			if (w == 0) {
 				str = "星期日";
 			} else if (w == 1) {
 				str = "星期一";
 			} else if (w == 2) {
 				str = "星期二";
 			} else if (w == 3) {
 				str = "星期三";
 			} else if (w == 4) {
 				str = "星期四";
 			} else if (w == 5) {
 				str = "星期五";
 			} else if (w == 6) {
 				str = "星期六";
 			}
 			//检查是否小于10
 			M = check(M);
 			d = check(d);
 			h = check(h);
 			m = check(m);
 			s = check(s);
 			var timestr = y + "-" + M + "-" + d + " " + h + ":" + m;
 			$('.dateCont').html(timestr)
 			$('.week').html(str)
 		}
 		//时间数字小于10，则在之前加个“0”补位。
 		function check(i) {
 			var num = (i < 10) ? ("0" + i) : i;
 			return num;
 		}
 	</script>

 </html>